<template>
  <div v-if="rerfferalAuth">
    <page-header :title="$t('m.Invitation_rewards')" :has-return="false">
      <el-button
        type="primary"
        @click="$router.push({ path: '/reward/rerfferal/cm' })"
        v-if="createAuth"
      >
        {{ $t('m.Invitation_rules') }}
      </el-button>
    </page-header>

    <!--容器-->
    <div class="container">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->
        <div class="table-box">
          <!--表格-->
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'
import FastTable from '@/components/fast-table.vue'
import page from '@/mixins/page'

export default {
  components: { SearchBar, pagination, FastTable },
  mixins: [page],
  data () {
    return {
      // 表格options
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.invitationID'),
            prop: 'inviterUCode',
            formatter: row => this.$format.strFormat(row.inviterUCode)
          },
          {
            label: this.$t('m.invitationOfID'),
            prop: 'inviteeUCode',
            formatter: row => this.$format.strFormat(row.inviteeUCode)
          },
          {
            label: this.$t('m.Awarded_points'),
            prop: 'point',
            formatter: row => this.$format.strFormat(row.point)
          },
          { label: this.$t('m.invitationRewardCoupon'), prop: 'quantity', formatter: row => this.$format.strFormat(row.quantity) },
          {
            label: this.$t('m.invitationTime'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      },
      rerfferalAuth: this.permissionsId(91),
      createAuth: this.permissionsId(203)
    }
  },
  created () {
    if (!this.rerfferalAuth) {
      return
    }
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            label: this.$t('m.search_'),
            placeholder: this.$t('m.User_ID')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.invitationTime')
          }
        ]
      }
    },
    getPage () {
      this.$api.invitation
        .getPageInvitationRecords(this.params, this.page)
        .then(res => {
          if (this.$ok(res)) {
            this.page = res.data
          }
        })
    }
  }
}
</script>

<style scoped lang="scss"></style>
